<script setup>
import { ref, onMounted } from 'vue';

let CurrentlyIndex = ref(1);
let modalIndex = ref(1);
let centerDialogVisible = ref(false);
const SwitchIndex = function (index) {
    openSwitch();
    CurrentlyIndex.value = index;
}
let delayed = null;
let timing = null;
const openSwitch = function () {
    clearInterval(timing);
    clearTimeout(delayed);
    delayed = setTimeout(() => {
        timing = setInterval(() => {
            if (CurrentlyIndex.value === 3) {
                CurrentlyIndex.value = 1;
            } else {
                CurrentlyIndex.value++
            }
        }, 1000 * 60 * 5);
    }, 1000 * 60 * 5)
}
const openVideoModal = function () {
    modalIndex.value = CurrentlyIndex.value;
    centerDialogVisible.value = true;
}
onMounted(() => {
    openSwitch();
})
</script>
<template>
    <div class="VideoMonitoring">
        <div class="header">
            <div class="title"></div>
            <div class="tab">
                <span @click="SwitchIndex(1)" :class="{ 'checked': CurrentlyIndex === 1 }">陕京2线</span>
                <span @click="SwitchIndex(2)" :class="{ 'checked': CurrentlyIndex === 2 }">陕京1线</span>
                <span @click="SwitchIndex(3)" :class="{ 'checked': CurrentlyIndex === 3 }">净化区域</span>
            </div>
        </div>
        <div class="videoFrame">
            <iframe :src="'./video.html?code=' + CurrentlyIndex"  frameborder="0"></iframe>
            <div class="mask" @click="openVideoModal"></div>
        </div>
    </div>
    <el-dialog class="modal" v-model="centerDialogVisible" width="80%" destroy-on-close>
        <iframe :src="'./video.html?code=' + modalIndex" frameborder="0"></iframe>
    </el-dialog>
</template>

<style lang="scss" scoped>
.VideoMonitoring {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.header {
    height: .2031rem;
    width: 100%;
    display: flex;
}

.title {
    height: .2031rem;
    width: 40%;
    display: inline-block;
    background-image: url('@/assets/title/VideoMonitoring.png');
    background-repeat: no-repeat;
    background-size: .776rem .1406rem;
    background-position: .0521rem 50%;
}

.tab {
    font-size: 0.06rem;
    font-weight: 500;
    color: #FFFFFF;
    width: 50%;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    color: rgba(255, 255, 255, 0.52);
    cursor: pointer;
}

.tab .checked {
    text-shadow: 0 0 .0521rem #fff;
    color: #fff;
}

.videoFrame {
    height: calc(100% - .2031rem);
    width: 100%;
    padding: 0.05rem;
    box-sizing: border-box;
    display: flex;
    position: relative;
}

.mask {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 999;
    left: 0px;
}

iframe {
    width: 100%;
    height: 100%;
}
</style>